<template>
    <div class="login-reminder">
        <div class="reminder-container">
            <div class="illustration">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
            </div>
            <h2 class="title">您尚未登录</h2>
            <p class="message">请登录后继续访问本页面</p>
            <!-- <div class="countdown">
                <span class="countdown-number">{{ countdown }}</span>
                <span>秒后自动跳转到登录页面</span>
            </div> -->
            <button class="login-button" @click="goToLogin">立即登录</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        countdown: 2
        }
    },
    mounted() {
    //   this.startCountdown()
    },
    methods: {
        startCountdown() {
            const timer = setInterval(() => {
                this.countdown--
                if (this.countdown <= 0) {
                clearInterval(timer)
                this.goToLogin()
                }
            }, 1000)
        },
        goToLogin() {
        // 替换为你的实际登录路由
        this.$router.push('/login')
        // 或者如果不是用Vue Router：
        // window.location.href = '/login'
        }
    }
}
</script>

<style scoped>
.login-reminder {
display: flex;flex-flow: column nowrap;
justify-content: start;
align-items: center;
min-height: 100vh;
background-color: #f5f7fa;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.reminder-container {
margin-top: 200px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
padding: 40px;
text-align: center;
max-width: 400px;
width: 100%;
transition: all 0.3s ease;
}

.reminder-container:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.illustration {
margin-bottom: 20px;
}

.illustration svg {
width: 80px;
height: 80px;
color: #6366f1;
}

.title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}

.message {
color: #666;
margin-bottom: 25px;
font-size: 16px;
}

.countdown {
margin: 20px 0;
font-size: 15px;
color: #666;
}

.countdown-number {
font-weight: bold;
color: #6366f1;
font-size: 18px;
}

.login-button {
background-color: #6366f1;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
width: 100%;
margin-top: 10px;
}

.login-button:hover {
background-color: #4f46e5;
transform: translateY(-2px);
}

.login-button:active {
transform: translateY(0);
}
</style>